<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/view/include/taglib.jsp"%>
<html lang="cn" class="app">
<head>
    <meta charset="utf-8" />
    <title>RCode | 睿代码管理平台 | 字典管理</title>
    <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="icon" type="image/png" href="icon.png">
    <link rel="apple-touch-icon-precomposed" href="icon.png">
    <link rel="stylesheet" href="${ctxStatic}/js/jPlayer/jplayer.flat.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/animate.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/simple-line-icons.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/font.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/app.css" type="text/css" />
    <%--<link rel="stylesheet" href="${ctxStatic}/js/page/paging.css" type="text/css" />--%>
    <!--[if lt IE 9]>
    <script src="${ctxStatic}/js/ie/html5shiv.js"></script>
    <script src="${ctxStatic}/js/ie/respond.min.js"></script>
    <script src="${ctxStatic}/js/ie/excanvas.js"></script>
    <![endif]-->
</head>
<body>
<section class="scrollable wrapper">
    <div class="row">
        <div class="col-lg-12">
            <!-- 引导开始 -->
            <ul class="breadcrumb">
                <li><a href="${ctx}/welcome"><i class="fa fa-home"></i> 主页</a></li>
                <li>系统设置</li>
                <li class="active">字典管理</li>
            </ul>
            <!-- 引导结束 -->
        </div>
    </div>

    <section class="panel panel-default">
        <%--操作区域 开始--%>
        <div class="row wrapper">
            <div class="col-sm-5 m-b-xs">
                <button class="btn btn-sm btn-default" onclick="openModel(false,'${ctx}/sys/dict/create')">新增</button>
                <button class="btn btn-sm btn-default" onclick="showTip(this)">如何使用</button>
            </div>
            <div class="col-sm-4 m-b-xs">
                <%--<div class="btn-group" data-toggle="buttons">--%>
                    <%--<label class="btn btn-sm btn-default active">--%>
                        <%--<input type="radio" name="options"> 每天--%>
                    <%--</label>--%>

                    <%--<label class="btn btn-sm btn-default">--%>
                        <%--<input type="radio" name="options"> 每周--%>
                    <%--</label>--%>

                    <%--<label class="btn btn-sm btn-default">--%>
                        <%--<input type="radio" name="options"> 每月--%>
                    <%--</label>--%>
                <%--</div>--%>
            </div>
            <%--搜索区域--%>
            <div class="col-sm-3">
                <div class="input-group">
                    <input id="searchKey" type="text" class="input-sm form-control" placeholder="输入关键词">
                    <span class="input-group-btn">
                            <button onclick="searchPage(1);" class="btn btn-sm btn-default" type="button">搜索</button>
                    </span>
                </div>
            </div>
        </div>
        <%--操作区域 结束--%>

        <div class="table-responsive">
            <table class="table table-striped b-t b-light">
                <thead>
                <tr>
                    <th class="text-center" style="width:50px;"><label class="checkbox m-n i-checks"><input type="checkbox"><i></i></label></th>
                    <th class="text-center" style="width:70px;">序号</th>
                    <th class="text-center" width="10%">代码</th>
                    <th class="text-center" width="20%">名称</th>
                    <th class="text-center" width="10%">排序</th>
                    <th class="text-center" width="30%">备注</th>
                    <th class="text-center" width="">操作</th>
                </tr>
                </thead>
                <tbody id="tplView">

                </tbody>

            </table>
        </div>

        <footer class="panel-footer">
            <div class="row">
                <div class="col-sm-6 hidden-xs">
                    <select class="input-sm form-control input-s-sm inline v-middle">
                        <option value="">选择操作</option>
                        <option value="1">删除</option>
                        <option value="2">编辑</option>
                        <option value="3">导出</option>
                    </select>
                    <button class="btn btn-sm btn-default" onclick="alert('敬请期待');">确定</button>
                </div>

                <%--分页--%>
                <div id="page" class="col-sm-6 text-right text-center-xs"></div>
            </div>

        </footer>

    </section>

</section>

<%--弹出层 明细--%>
<div id="itemTable"  style="display: none;">
    <div class="table-responsive" style="padding:5px 15px;">
        <table class="table table-striped b-t b-light">
            <thead>
            <tr>
                <th class="text-center" width="30%">代码</th>
                <th class="text-center" width="30%">名称</th>
                <th class="text-center" width="10%">排序</th>
                <th class="text-center" width="30%">备注</th>
            </tr>
            </thead>
            <tbody id="itemTplView">

            </tbody>
        </table>
    </div>
</div>
</body>
<script src="${ctxStatic}/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="${ctxStatic}/js/bootstrap.js"></script>
<!-- App -->
<script src="${ctxStatic}/js/app.js"></script>
<script src="${ctxStatic}/js/slimscroll/jquery.slimscroll.min.js"></script>
<script src="${ctxStatic}/js/app.plugin.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/jPlayer/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/jPlayer/add-on/jplayer.playlist.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/jPlayer/demo.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/tools.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/page/paging.js?12321222222321233232"></script>
<script type="text/javascript" src="${ctxStatic}/js/layer/layer.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/tmpl/jquery.tmpl.js"></script>
<script id="tplHtml" type="text/x-jquery-tmpl">
    {{if results && results.length>0}}
        {{each results}}
        <tr>
            <td class="text-center" ><label class="checkbox m-n i-checks"><input type="checkbox" name="post[]"><i></i></label></td>
            <td class="text-center" >{{= ($index+1)+(pageNo-1)*10}}</td>
            <td><a href="javascript:;" style="color:#428bca" onclick="showDictItems(this,{{= id }})">{{= value}}</a></td>
            <td>{{= label }}</td>
            <td class="text-center" >{{= sort }}</td>
            <td>{{= remarks }}</td>
            <td class="text-center">
                <div class="btn-group">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-pencil"></i></a>
                    <ul class="dropdown-menu pull-right" style="min-width: 60px;">
                        <li><a href="javascript:;" onclick="openModel('','${ctx}/sys/dict/view?id={{= id }}',true,true)">查看</a></li>
                        <li><a href="javascript:;" onclick="openModel('','${ctx}/sys/dict/update?id={{= id }}',true,true)">编辑</a></li>
                        <li><a href="${ctx}/sys/dict/{{= id }}/delete" onclick="return confirm('确认要删除该条数据吗？', this.href)" title="删除">删除</a></li>
                    </ul>
                </div>
            </td>
        </tr>

        {{/each}}
    {{else}}
        <tr><td colspan="6" class="text-center">暂无数据</td></tr>
    {{/if}}
</script>
<script id="itemTplHtml" type="text/x-jquery-tmpl">
    {{if data && data.length>0}}
        {{each data}}
        <tr>
            <td class="text-center"><a href="javascript:;" style="color:#428bca" >{{= value}}</a></td>
            <td class="text-center">{{= label }}</td>
            <td class="text-center" >{{= sort }}</td>
            <td>{{= remarks }}</td>
        </tr>
        {{/each}}
    {{else}}
        <tr><td colspan="4" class="text-center">暂无数据</td></tr>
    {{/if}}
</script>
<script>
    $(function(){
        searchPage(1);
    })
    //查询分页数据
    function searchPage(num){
        var label = $("#searchKey").val();
        $.ajax({
            type: 'post',
            url: '${ctx}/sys/dict/list.json',
            dataType:"json",
            data: {"pageNo":num,"pageSize":10,"label":label},
            success: function (data) {
                var page = data.data;
                $( "#tplView" ).empty();
                $( "#tplHtml" ).tmpl( data.data ).appendTo( "#tplView" );

                //分页
                $("#page").paging({
                    pageNo:page.pageNo,
                    totalPage: page.totalPage,
                    totalSize: page.totalRecord,
                    callback: function(num) {
                        searchPage(num);
                    }
                })

            }
        });
    }
function showTip(dom) {
    var content = "<div style=\"font-size:14px;color:#fff;padding:5px 10px 5px 20px;\">" +
        "使用方法：<br/> " +
        "引入：【com.raising.modules.sys.utils.DictUtils】 <br/><br/> " +
        "<span style=\"font-weight: bold\">1、获取指定字典数据列表：</span><br/> " +
        "&nbsp;&nbsp;List<DictItem> getDictList(String dictValue)<br/>" +
        "&nbsp;&nbsp;dictValue：字典表代码<br/><br/>" +
        "<span style=\"font-weight: bold\">2、获取指定字典的指定key的value值：</span><br/>" +
        "&nbsp;&nbsp;String getDictLabel(String value, String dictValue, String defaultValue)<br/>" +
        "&nbsp;&nbsp;value：具体字典数据key<br/>" +
        "&nbsp;&nbsp;dictValue：字典表代码<br/>" +
        "&nbsp;&nbsp;defaultValue：返回null后的默认值<br/>" +
        "</div>";

    //小tips
    layer.tips(content, $(dom), {
        tips: [1, '#3595CC'],
        area: ['500px', '350px'],
        time: 0,
        closeBtn: 1,
        shadeClose: true
    });

}

    function showDictItems(dom,id) {
        var content;
        $.ajax({
            type: 'post',
            url: '${ctx}/sys/dict/listItems.json',
            dataType:"json",
            data: {"dictId":id},
            success: function (data) {
                content = $( "#itemTplHtml" ).tmpl( data );
                $("#itemTplView").html(content);

                layer.open({
                    type: 1,
                    title: "<span style='font-weight:bold'>【"+$(dom).html()+"】字典数据</span>",
                    closeBtn: 0,
                    area: ['600px', '350px'],
                    shadeClose: true,
                    skin: '',
                    content: $("#itemTable").html()
                });

//                //小tips
//                layer.tips($("#itemTable").html(), $(dom), {
//                    tips: [1, '#fff'],
//                    area: ['500px', '350px'],
//                    time: 0,
//                    closeBtn: 1,
//                    shadeClose: true
//                });

            }
        });


    }

</script>
</html>
